<template>
  <div>
    <a-spin :spinning="htmlLoading">
      <div v-if="!finish">
      一周点名情况&nbsp;{{thisWeekStartDay||''}}&nbsp;
      <span v-if="thisWeekEndDay">~</span>
      &nbsp;{{thisWeekEndDay||''}}
      <div style="position:relative;">
        <s-table
          ref="table_now"
          :rowKey="(record) => record.id"
          :columns="weekTableTitle"
          :data="nowTableLoadData"
          :loading="loading"
          class="user_management_table"
          style="margin-top:20px;"
          :showPagination="false"
        >
          <span slot="no_index" slot-scope="text,record,index">{{index+1}}</span>
          <span
            slot="classTime"
            slot-scope="text,record"
          >{{record.date|dayjs}}&nbsp;{{record.class_start_time+'~'}}{{record.class_end_time}}</span>
          <span slot="teachers" slot-scope="text,record">
            <span v-for="(item,index) in record.teachers" :key="index">
              <span>{{item}}</span>
              <span v-if="index!=record.teachers.length-1">，</span>
            </span>
          </span>
          <span slot="createTime" slot-scope="text,record">
            <span v-if="record.roll_call_time">{{record.roll_call_time|formatDate}}</span>
            <span v-else>--</span>
          </span>
          <span slot="action" slot-scope="text,record">
            <span v-if="record.call_students">
              <a @click="comePeopleNum(record)">{{record.call_students}}</a>
            </span>
            <span v-else>
              <a
                @click="$router.push({ name: 'orderName', query: { class_id: Number($route.query.id),schedules_id:record.id,date:$options.filters['dayjs'](record.date),classStartTime:record.class_start_time,classEndTime:record.class_end_time,teacher:record.teacher_ids,classroom:record.class_room_id,content:record.content } })"
              >点名</a>
              <a-divider type="vertical" />
              <a @click="lookInfo(record)">课次详情</a>
              <a-divider type="vertical" />
              <a @click="del(record)">删除</a>
            </span>
          </span>
        </s-table>
        <div style="position:absolute; top:-40px;right:0px;">
          <a-button style="margin-right:20px;" @click="getWeek('last')">
            <a-icon type="left" />上周
          </a-button>
          <a-button style="margin-right:20px;" @click="nowWeek">本周</a-button>
          <a-button style="margin-right:20px;" @click="getWeek('next')">
            下周
            <a-icon type="right" />
          </a-button>
          <a-button type="primary" @click="orderName">未排课直接点名</a-button>
        </div>
      </div>
      <br />
      </div>
      <div>
        <div style="position:relative;">
          历史点名情况
          <div style="position:absolute;top:0px;right:0;">
            <a-button @click="excelOut">导出签到情况表</a-button>
          </div>
        </div>
      </div>
      <s-table
        ref="table_history"
        :rowKey="(record) => record.id"
        :columns="historyTableTitle"
        :data="loadData"
        :loading="loading"
        class="user_management_table"
        style="margin-top:20px;"
      >
        <span slot="no_index" slot-scope="text,record,index">{{index+1}}</span>
        <span
          slot="classTime"
          slot-scope="text,record"
        >{{record.attend_class_day||''}}&nbsp;{{record.start_time+'~'}}{{record.end_time}}</span>
        <span slot="teachers" slot-scope="text,record">
          <span v-for="(item,index) in record.teachers" :key="index">
            <span>{{item}}</span>
            <span v-if="index!=record.teachers.length-1">，</span>
          </span>
        </span>
        <span slot="peopleNum" slot-scope="text,record">
          <a @click="comePeopleNum(record)">{{record.actual_number}}</a>
        </span>
      </s-table>
      <lesson-drawer ref="drawer" :structure_name="structureName" @deleteLesson="getTableList()"></lesson-drawer>
      <a-drawer
        title="课次详情"
        placement="right"
        :visible="takeNameInfovisible"
        @close="takeNameInfovisible=false"
        :width="680"
      >
        <div class="className">{{className}}</div>
        <detail-list title="课次信息" :col="2">
          <detail-list-item class="itemTitle" term="上课时间">
            <span
              v-if="courseInfo.start_time"
            >{{courseInfo.attend_class_day||''}}&nbsp;{{courseInfo.start_time+'~'}}{{courseInfo.end_time}}</span>
            <span
              v-else
            >{{courseInfo.date|dayjs}}&nbsp;{{courseInfo.class_start_time+'~'}}{{courseInfo.class_end_time}}</span>
          </detail-list-item>
          <detail-list-item class="itemTitle" term="授课课程">{{courseInfo.course_name}}</detail-list-item>
          <detail-list-item class="itemTitle" term="上课老师">
            <span v-for="(item,index) in courseInfo.teachers" :key="index">
              <span>{{item}}</span>
              <span v-if="index!=courseInfo.teachers.length-1">，</span>
            </span>
          </detail-list-item>
          <!-- <detail-list-item class="itemTitle" term="授课课时">{{courseInfo.verify_class_hour}}</detail-list-item> -->
          <detail-list-item class="itemTitle" term="上课内容">{{courseInfo.content||'--'}}</detail-list-item>
          <detail-list-item class="itemTitle" term="上课教室">{{courseInfo.classroom_name||'--'}}</detail-list-item>
        </detail-list>
        <div class="table_ className">
          <div class="table_title className" style="margin-top:10px;">上课学员</div>
          <a-table
            :columns="columns"
            :data-source="courseInfoData"
            :pagination="false"
            style="border:1px solid #e8e8e8;"
            class="user_management_table"
          >
              <span slot="name" slot-scope="text,record">
                <!-- <span v-if="record.student">{{record.student.name}}</span> -->
                <span
                  :title="(record.name||'-')+(record.student_type==1?'(临时学员)':record.student_type==2?'(调课学员)':record.student_type==3?'(试听学员)':'')"
                >{{record.name||'-'}}{{record.student_type==1?'(临时学员)':record.student_type==2?'(调课学员)':record.student_type==3?'(试听学员)':''}}</span>
              </span>
              <!-- 已点名 -->
              <span slot="call_type" slot-scope="text,record">
                <span v-if="record.call_type==1" style="color:rgb(153, 153, 153)">到课</span>
                <span v-else-if="record.call_type==2" style="color:rgb(153, 153, 153)">迟到</span>
                <span v-else-if="record.call_type==3" style="color: rgb(88, 183, 239);">请假</span>
                <span v-else-if="record.call_type==4" style="color:rgb(255, 103, 103)">未到</span>
                <span v-else style="color:rgb(153, 153, 153)">--</span>
              </span>
              <span slot="phone" slot-scope="text,record">
                <span>{{record.main_phone||'--'}}</span>
              </span>
              <span slot="deduction" slot-scope="text,record">
                <span v-if="record.deduction&&record.deduction.type">
                  <span
                    v-if="record.deduction.type=='hour'"
                  >{{+Number(record.deduction.allowance)+'课时'}}</span>
                  <span
                    v-else-if="record.deduction.type=='day'"
                  >按天自动消耗</span>
                  <span v-else-if="record.deduction.type=='super'">按天自动消耗（本次超上）</span>
                  <span v-else-if="record.deduction.type=='audition'">试听不扣课时</span>
                </span>
                <span v-else>-</span>
              </span>
              <span slot="remarks" slot-scope="text,record">{{record.remarks||'--'}}</span>
          </a-table>
        </div>
      </a-drawer>
    </a-spin>
  </div>
</template>

<script>
const weekTableTitle = [
  {
    title: 'No',
    dataIndex: 'no',
    fixed: 'left',
    width: 50,
    ellipsis: true,
    scopedSlots: { customRender: 'no_index' }
  },
  {
    title: '上课时间',
    dataIndex: 'class_time',
    ellipsis: true,
    width: 200,
    scopedSlots: { customRender: 'classTime' }
  },
  {
    title: '授课课程',
    dataIndex: 'course_name',
    ellipsis: true,
    customRender(course_name) {
      return course_name || '--'
    }
  },
  {
    title: '上课教室',
    dataIndex: 'class_room_name',
    ellipsis: true,
    customRender(class_room_name) {
      return class_room_name || '--'
    }
  },
  {
    title: '上课老师',
    dataIndex: 'teachers',
    ellipsis: true,
    scopedSlots: { customRender: 'teachers' }
  },
  {
    title: '上课内容',
    dataIndex: 'content',
    ellipsis: true,
    customRender(content) {
      return content || '--'
    }
  },
  {
    title: '点名时间',
    dataIndex: 'created_at',
    ellipsis: true,
    scopedSlots: { customRender: 'createTime' }
  },

  {
    title: '操作',
    width: 200,
    dataIndex: 'action',
    fixed: 'right',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
const historyTableTitle = [
  {
    title: 'No',
    dataIndex: 'no',
    fixed: 'left',
    width: 50,
    ellipsis: true,
    scopedSlots: { customRender: 'no_index' }
  },
  {
    title: '上课时间',
    dataIndex: 'class_time',
    ellipsis: true,
    width: 200,
    scopedSlots: { customRender: 'classTime' }
  },
  {
    title: '授课课程',
    dataIndex: 'course_name',
    ellipsis: true
  },
  {
    title: '上课教室',
    dataIndex: 'classroom_name',
    ellipsis: true
  },
  {
    title: '上课老师',
    dataIndex: 'teachers',
    ellipsis: true,
    scopedSlots: { customRender: 'teachers' }
  },
  {
    title: '上课内容',
    dataIndex: 'content',
    ellipsis: true,
    customRender(content) {
      return content || '--'
    }
  },
  {
    title: '点名时间',
    dataIndex: 'created_at',
    ellipsis: true
  },
  {
    title: '授课课时',
    dataIndex: 'verify_class_hour',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '实到人数',
    dataIndex: 'actual_number',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'peopleNum' }
  }
]
import moment from 'moment'
import { STable } from '@/components'
import linshiStudentInClass from '@/components/LINSHIstudent'
import { classTakeNameExcelOut, studentInClass } from '@/api/class'
import { takeNameList, takeNameWeekList, newTakeNameInfo, delAdjust, getLessonInfo } from '@/api/takeName'
import DetailList from '@/components/tools/DetailList'
import classroomComponents from '@/components/classroomManage'
import classTime from '@/components/classTimeModel'
import lessonDrawer from '@/components/lessonTableDrawer'
const DetailListItem = DetailList.Item
export default {
  components: {
    STable,
    DetailList,
    DetailListItem,
    classroomComponents,
    classTime,
    linshiStudentInClass,
    lessonDrawer
  },
  name: 'takeName',
  props: ['className','finish'],
  data() {
    return {
      loading: false,
      htmlLoading: false,
      loadData: parameter => {
        this.loading = true
        return takeNameList(
          Object.assign(parameter, { class_id: Number(this.$route.query.id), school_id: this.$store.state.user.school,no_delete:true })
        )
          .then(res => {
            this.loading = false
            return res
          })
          .catch(err => {
            this.loading = false
            this.$message.error(err.data.message || '获取数据失败，请刷新页面或稍后再试')
          })
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      historyTableTitle,
      weekTableTitle,
      nowTableLoadData: parameter => {
        this.loading = true
        return takeNameWeekList(
          Object.assign(parameter, {
            class_id: Number(this.$route.query.id),
            date: this.thisWeekStartDay,
            // end_time: this.thisWeekEndDay,
            school_id: this.$store.state.user.school,
            pageSize: 999999
          })
        )
          .then(res => {
            this.loading = false
            return res
          })
          .catch(err => {
            this.loading = false
            this.$message.error(err.data.message || '获取数据失败，请刷新页面或稍后再试')
          })
      },
      nowWeekStartDay: null, //本周
      nowWeekEndDay: null, //本周
      thisWeekStartDay: null, //当前展示周
      thisWeekEndDay: null, //当前展示周
      takeNameInfovisible: false,
      courseInfo: {
        attend_class_day: null,
        start_time: null,
        end_time: null,
        course_name: null,
        teachers: [],
        verify_class_hour: null,
        content: null,
        classroom_name: null
      },
      structureName:null,//传参给抽屉的校区名称
      columns: [
       {
          title: '学员姓名',
          dataIndex: 'name',
          width: 100,
          ellipsis: true,
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '手机号',
          dataIndex: 'main_phone',
          width: 120,
          scopedSlots: { customRender: 'phone' },
        },
        {
          title: '到课状态',
          dataIndex: 'call_type',
          ellipsis: true,
          width: 90,
          align: 'right',
          scopedSlots: { customRender: 'call_type' },
        },
        {
          title: '扣课时',
          dataIndex: 'deduction',
          scopedSlots: { customRender: 'deduction' },
        },
        {
          title: '备注',
          dataIndex: 'remarks',
          ellipsis: true,
          width: 150,
          scopedSlots: { customRender: 'remarks' },
        },
      ],
      courseInfoData: []
    }
  },
  created() {
    let now = new Date() // 当前日期
    let nowDayOfWeek = now.getDay() // 今天本周的第几天
    let day = nowDayOfWeek || 7
    let nowDay = now.getDate() // 当前日
    let nowMonth = now.getMonth() // 当前月
    let nowYear = now.getYear() // 当前年
    this.nowWeekStartDay = this.formatDate(new Date(now.getFullYear(), nowMonth, nowDay + 1 - day))
    this.thisWeekStartDay = this.formatDate(new Date(now.getFullYear(), nowMonth, nowDay + 1 - day))
    this.nowWeekEndDay = this.formatDate(new Date(now.getFullYear(), nowMonth, nowDay + 7 - day))
    this.thisWeekEndDay = this.formatDate(new Date(now.getFullYear(), nowMonth, nowDay + 7 - day))
  },
  methods: {
    getWeek(e) {
      let start_day = new Date(this.thisWeekStartDay)
      let end_day = new Date(this.thisWeekEndDay)
      let new_start_day
      let new_end_day
      if (e == 'last') {
        new_start_day = start_day.getTime() - 7 * 24 * 3600 * 1000
        new_end_day = end_day.getTime() - 7 * 24 * 3600 * 1000
      } else {
        new_start_day = start_day.getTime() + 7 * 24 * 3600 * 1000
        new_end_day = end_day.getTime() + 7 * 24 * 3600 * 1000
      }
      this.thisWeekStartDay = this.formatDate(new Date(new_start_day))
      this.thisWeekEndDay = this.formatDate(new Date(new_end_day))
      this.$refs.table_now.refresh()
    },
    nowWeek() {
      this.thisWeekStartDay = this.nowWeekStartDay
      this.thisWeekEndDay = this.nowWeekEndDay
      this.$refs.table_now.refresh()
    },
    //格式化时间
    formatDate(date) {
      let myyear = date.getFullYear()
      let mymonth = date.getMonth() + 1
      let myweekday = date.getDate()
      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return myyear + '-' + mymonth + '-' + myweekday
    },
    orderName() {
      this.$router.push({ name: 'orderName', query: { class_id: Number(this.$route.query.id) } })
    },
    excelOut() {
      classTakeNameExcelOut(this.$route.query.id, this.$store.state.user.school)
        .then(res => {
          let url = res.url.url + res.url.path
          window.location.href = url
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取导出资源失败~')
        })
    },
    del(e) {
      let that = this
      this.$confirm({
        title: '提示',
        content: '确认删除？',
        okText: '确定',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          delAdjust({
            id: e.id,
            date: that.thisWeekStartDay
          })
            .then(res => {
              that.$refs.table_now.refresh()
              that.classInfoVisible = false
              that.$message.success('删除成功')
            })
            .catch(err => {
              that.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {}
      })
    },
    lookInfo(e) {
      this.htmlLoading = true
      let nowDay = this.$options.filters['dayjs'](e.date)
      getLessonInfo(
        {
          school_id: this.$store.state.user.school,
          date:nowDay
        },
        e.id
      )
        .then(res => {
          if(res.structure_name){
            this.structureName = res.structure_name
          }
          this.$refs.drawer.showDrawer(res)
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取课次详情失败')
        })
        .finally(() => {
          this.htmlLoading = false
        })
    },
    getTableList() {
      this.$refs.table_now.refresh()
    },
    comePeopleNum(e) {
      this.htmlLoading = true
      newTakeNameInfo(Object.assign({}),e.id)
        .then(res => {
          let data = JSON.parse(JSON.stringify(e))
          this.courseInfo = data
          this.courseInfoData = res.data
          this.takeNameInfovisible = true
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取点名详情失败~')
        })
        .finally(() => {
          this.htmlLoading = false
        })
    },
    moment
  },
  watch: {},

}
</script>

<style lang="less" scoped>
.classTitle {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.stepTitle {
  margin-bottom: 20px;
  .title {
    font-size: 16px;
  }
}
.changeClassTitle {
  font-size: 16px;
  color: rgb(102, 102, 102);
  line-height: 20px;
  margin-bottom: 8px;
  font-weight: bolder;
}
.className {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.itemTitle {
  padding: 0 20px 0 28px;
}
</style>